{% extends 'base.html' %}
{% block title %}
    {{ blog.title }} - Django博客
{% endblock %}

{% block head %}
    <!-- 加载Highlight.js via CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/blog_detail.css' %}">
    <script src="{% static 'js/blog_detail.js' %}"></script>
{% endblock %}

{% block main %}
    <!-- 阅读进度条 -->
    <div class="reading-progress" id="reading-progress"></div>

    <article class="blog-post">
        <!-- 博客标题和元信息 -->
        <div class="mb-6">
            <div class="flex items-center mb-4">
                <span class="badge bg-gradient-to-r from-purple-600 to-pink-500 text-white mr-2">
                    {{ blog.category.name|default:"未分类" }}
                </span>
                <time class="text-sm text-muted">{{ blog.create_time|date:'Y年m月d日 H:i' }}</time>
            </div>

            <h3 class="display-4 font-bold mb-4">{{ blog.title }}</h3>

            <div class="d-flex items-center justify-between flex-wrap gap-4 bg-light p-4 rounded-lg">
                <div class="d-flex items-center">

                    <a href="{% url 'author:user_page' blog.author.id %}">
                        {% if blog.author.userprofile.avatar %}
                            <img src="{{ blog.author.userprofile.avatar.url }}" alt="{{ blog.author.username }}" width="36" height="36" class="d-inline-block align-text-top rounded-circle">
                        {% else %}
                            <img src="{% static 'img/headicon/default.png' %}" alt="默认头像" width="36" height="36" class="d-inline-block align-text-top rounded-circle">
                        {% endif %}
                    </a>
                    <div class="ml-3">
                        <div class="font-medium">{{ blog.author }}</div>
                        <div class="text-xs text-muted">作者</div>
                    </div>
                </div>

                <div class="flex items-center space-x-6">
                    <div class="text-center">
                        <div class="font-bold text-gray-700">{{ blog.views_count }}</div>
                        <div class="text-xs text-muted">浏览量</div>
                    </div>
                </div>
            </div>
        </div>

        <hr class="my-6 border-gray-200">

        <!-- 博客内容 -->
        <div class="blog-content mb-8">
            {{ blog.content|safe }}
        </div>

        <!-- 文章底部互动 -->
        <div class="flex justify-between items-center py-4 border-t border-b border-gray-200">
            <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-pink-500 transition-colors like-button" data-blog-id="{{ blog.id }}">
                    <span class="like-icon">
                    {% if blog_is_liked %}
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="#ff4d6d" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                        </svg>
                    {% else %}
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                        </svg>
                    {% endif %}
                    </span>
                    <span class="likes-count">{{ blog.likes_count }}</span>
                </button>
                <!-- 调试用：确认ID是否正确渲染 -->
                <span style="display:none">当前博客ID: {{ blog.id }}</span>
            </div>
        
            <a href="/" class="btn btn-outline-secondary rounded-full">返回首页</a>
        </div>

        <!-- 作者信息 -->
        <div class="mt-8 p-5 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl">
            <div class="flex items-center">
                <a href="{% url 'author:user_page' blog.author.id %}">
                    {% if blog.author.userprofile.avatar %}
                        <img src="{{ blog.author.userprofile.avatar.url }}" alt="{{ blog.author.username }}" width="60" height="60" class="d-inline-block align-text-top rounded-circle">
                    {% else %}
                        <img src="{% static 'img/headicon/default.png' %}" alt="默认头像" width="60" height="60" class="d-inline-block align-text-top rounded-circle">
                    {% endif %}
                </a>
                <div class="ml-4">
                    <h4 class="font-bold">{{ blog.author }}</h4>
                    <p class="text-sm text-gray-600 mt-1">热爱技术分享的博主</p>
                </div>
            </div>
        </div>

        <!-- 评论区 -->
        <div class="mt-10">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold">评论 ({{ comments.count }})</h2>
            </div>

            <!-- 评论表单 -->
            <form action="{% url 'blog:comment_blog' %}" method="post" class="mb-8 p-6 bg-gray-50 rounded-xl">
                {% csrf_token %}
                <input type="hidden" name="blog_id" value="{{ blog.id }}">

                <div class="mb-4">
                    <textarea
                            class="form-control"
                            id="comment"
                            rows="4"
                            placeholder="分享你的想法..."
                            name="content"
                            required
                    ></textarea>
                </div>

                <div class="text-end">
                    <button type="submit" class="btn btn-primary px-6 py-2 rounded-full">
                        发表评论
                    </button>
                </div>
            </form>

            <!-- 评论列表 -->
            {% if comments %}
                <div class="space-y-4">
                    {% for comment in comments %}
                        <div class="p-4 border border-gray-100 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                            <div class="d-flex justify-between items-start">
                                <div class="d-flex items-center">
                                    <a href="{% url 'author:user_page' comment.author.id %}">
                                        {% if comment.author.userprofile.avatar %}
                                            <img src="{{ comment.author.userprofile.avatar.url }}" alt="{{ comment.author.username }}" width="36" height="36" class="d-inline-block align-text-top rounded-circle">
                                        {% else %}
                                            <img src="{% static 'img/headicon/default.png' %}" alt="默认头像" width="36" height="36" class="d-inline-block align-text-top rounded-circle">
                                        {% endif %}
                                    </a>
                                    <div class="ml-3">
                                        <div class="font-medium">{{ comment.author }}</div>
                                        <div class="text-xs text-muted">
                                            {{ comment.create_time|date:'Y年m月d日 H:i' }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-3 pl-12">
                                <p>{{ comment.content }}</p>
                                <!-- 评论列表中的点赞按钮 -->
                                <div class="mt-2 flex space-x-4">
                                    <!-- 点赞按钮 -->
                                    <button class="text-sm hover:text-pink-500 transition-colors like-comment-btn" data-comment-id="{{ comment.id }}">
                                        <!-- 判断是否点赞 -->
                                        {% if comment.is_liked %}
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="#ff4d6d" xmlns="http://www.w3.org/2000/svg" class="mr-1 inline">
                                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                            </svg>
                                        {% else %}
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="mr-1 inline">
                                                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                                            </svg>
                                        {% endif %}
                                        <span class="like-count">{{ comment.likes_count }}</span>
                                    </button>
                                    <!-- 调试用：确认评论ID是否正确渲染 -->
                                    <span style="display:none">当前评论ID: {{ comment.id }}</span>
                                    <button class="text-sm text-gray-500 hover:text-blue-500 transition-colors reply-btn" data-comment-id="{{ comment.id }}">
                                        回复
                                    </button>
                                </div>

                                <!-- 回复表单 -->
                                <div class="reply-form mt-3 hidden" id="reply-form-{{ comment.id }}">
                                    <form action="{% url 'blog:comment_blog' %}" method="post" class="p-3 bg-gray-50 rounded-lg">
                                        {% csrf_token %}
                                        <input type="hidden" name="blog_id" value="{{ blog.id }}">
                                        <input type="hidden" name="parent_id" value="{{ comment.id }}">
                                        <textarea
                                                class="form-control form-control-sm"
                                                rows="2"
                                                placeholder="回复 @{{ comment.author.username }}..."
                                                name="content"
                                                required
                                        ></textarea>
                                        <div class="mt-2 text-end">
                                            <button type="button" class="btn btn-sm btn-outline-secondary mr-2 cancel-reply" data-comment-id="{{ comment.id }}">取消</button>
                                            <button type="submit" class="btn btn-sm btn-primary">回复</button>
                                        </div>
                                    </form>
                                </div>

                                <!-- 嵌套回复 -->
                                {% if comment.replies.all %}
                                    <div class="mt-4 pl-12 space-y-4">
                                        {% for reply in comment.replies.all %}
                                            <div class="p-3 border-l-2 border-gray-200 bg-gray-50 rounded-r-lg">
                                                <div class="flex justify-between items-start">
                                                    <div class="flex items-center">
                                                        <a href="{% url 'author:user_page' reply.author.id %}">
                                                            {% if reply.author.userprofile.avatar %}
                                                                <img src="{{ reply.author.userprofile.avatar.url }}" alt="{{ reply.author.username }}" width="24" height="24" class="d-inline-block align-text-top rounded-circle">
                                                            {% else %}
                                                                <img src="{% static 'img/headicon/default.png' %}" alt="默认头像" width="24" height="24" class="d-inline-block align-text-top rounded-circle">
                                                            {% endif %}
                                                        </a>
                                                        <div class="ml-2">
                                                            <div class="text-sm font-medium">{{ reply.author }}</div>
                                                            <div class="text-xs text-muted">
                                                                {{ reply.create_time|date:'Y年m月d日 H:i' }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mt-2">
                                                    <p class="text-sm">回复 @{{ comment.author.username }}: {{ reply.content }}</p>
                                                </div>

                                                <!-- 回复中的点赞按钮 -->
                                                <div class="mt-2 flex space-x-4">
{#                                                    <button class="text-xs hover:text-pink-500 transition-colors like-comment-btn" data-comment-id="{{ reply.id }}">#}
{#                                                    {% if reply.is_liked %}#}
{#                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="#ff4d6d" xmlns="http://www.w3.org/2000/svg" class="mr-1 inline">#}
{#                                                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>#}
{#                                                    </svg>#}
{#                                                    {% else %}#}
{#                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="mr-1 inline">#}
{#                                                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>#}
{#                                                    </svg>#}
{#                                                    {% endif %}#}
{#                                                    <span class="like-count">{{ reply.likes_count }}</span>#}
{#                                                    </button>#}
                                                    <!-- 调试用：确认回复ID是否正确渲染 -->
                                                    <span style="display:none">当前回复ID: {{ reply.id }}</span>
                                                    <button class="text-xs text-gray-500 hover:text-blue-500 transition-colors reply-btn" data-comment-id="{{ reply.id }}">
                                                        回复
                                                    </button>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-10">
                    <div class="mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#ccc" class="bi bi-chat-dots" viewBox="0 0 16 16">
                            <path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                            <path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.682 21.682 0 0 0 .693-.125zm-.8 2.121a11.196 11.196 0 0 1-.24-.637l-.004-.01c-.146-.46-.23-.905-.224-1.404.006-.498.386-1.096 1.09-1.986 2.397-.873 3.684-2.049 4.296-2.684.199-.182.33.085.33.268a10.6 10.6 0 0 1-.194.738.43.43 0 0 0 .085.586c.173.16.447.15.614-.013.328-.204.682-.346 1.005-.454.402-.12.826-.034 1.16.117a3.323 3.323 0 0 1 .865 1.705c.204.62.396 1.207.554 1.747.081.208.135.438.135.678 0 .375-.18.72-.451 1.009a2.096 2.096 0 0 1-1.534.533c-.341 0-.682-.115-1.005-.337a10.97 10.97 0 0 1-4.769-2.209 10.65 10.65 0 0 1-1.216-.384z"/>
                        </svg>
                    </div>
                    <h3 class="text-muted mb-2">暂无评论</h3>
                    <p class="text-sm text-gray-500">成为第一个评论的人吧！</p>
                </div>
            {% endif %}
        </div>
    </article>
{% endblock %}